<template>
    <base-page>
		<view slot="header">
			<!-- #ifdef MP-WEIXIN -->
			<cu-custom :isBack="true" bgColor="bg-white">
			    <block slot="content">余额明细</block>
			</cu-custom>
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<block>
			    <cu-custom :isBack="true" bgColor="bg-white">
			        <block slot="content">余额明细</block>
			    </cu-custom>
			</block>
			<!-- #endif -->
		</view>
        <view slot="center" class="auto-100 ">
            <mescroll-uni ref="mescrollRef" @init="mescrollInit" height="100%" :down="downOption" @down="downCallback" :up="upOption"
             @up="upCallback">
            <view class="section bg-gray">
                <view class="detailList bg-white">
                    <view class="detail" v-for="(item, index) in list" :key="index" v-if="item.account_data!='0.00'">
                        <view class="item df-cen-rl">
                            <view>{{item.remark}}</view>
                            <view>{{item.account_data}}元</view>
                        </view>
                        <view class="text df-cen-rl">
                            <view>{{$Utils.formatDate(item.create_time*1000,false)}}</view>
                            <view>{{item.type_tag}}</view>
                        </view>
                    </view>
                </view>
            </view>
			</mescroll-uni>
			
        </view>
		
    </base-page>
</template>

<script>
import $Axios from '@/common/js/request/http.js';
	import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
	import MescrollMoreItemMixin from '@/components/mescroll-uni/mixins/mescroll-more-item.js';
export default {
	mixins: [MescrollMixin, MescrollMoreItemMixin],
    data() {
        return {
            detailList: [
                {
                    name: '提现',
                    money: '+123',
                    updateTime: '2020-11-11',
                    way: '微信'
                },
                {
                    name: '提现',
                    money: '+123',
                    updateTime: '2020-11-11',
                    way: '微信'
                },
                {
                    name: '提现',
                    money: '+123',
                    updateTime: '2020-11-11',
                    way: '微信'
                }
            ],
			mescroll: null,
			downOption: {
				auto: false // 不自动加载 (mixin已处理第一个tab触发downCallback)
			},
			upOption: {
				auto: true, // 不自动加载
				noMoreSize: 5, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
				empty: {
					icon: 'https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/home/empty.png',
					tip: '~ 空空如也 ~' // 提示
				}
			},
			list:null,
        };
    },
    onLoad(e) { },
    onShow(e) { },
    methods: {
		// 初始化
		mescrollInit(e) {
			this.mescroll = e;
		},
		/*下拉刷新的回调 */
		downCallback(e) {
			this.mescroll.resetUpScroll();
		},
		/*上拉加载的回调 */
		upCallback(page) {
			this.getList(page.num,20);
		},
		getList(page,page_size){
			// api/memberwithdraw/page
			$Axios.post(`api/memberaccount/page`,{
				page:page,
				page_size:page_size,
				account_type: "balance"
			}).then(res=>{
				this.mescroll.endSuccess(res.list.length);
				// console.log(res)
				if (res.list.length > 0) {
					if (page == 1) {
						this.list = res.list
						this.page = 1;
					} else {
						this.list = this.list.concat(res.list);
						this.page = page;
					}
				}
				
			})
		}
	},
    mounted() { }
};
</script>

<style lang="scss">
.section {
    padding-top: 10px;
    height: 100%;
    .detail {
        padding: 10px;
        border-bottom: 1px solid #f4f4f4;
        .item {
            color: #212121;
            font-size: 14px;
            text-align: center;
            font-weight: bold;
            margin-bottom: 5px;
        }
        .text {
            font-size: 12px;
            color: #999999;
        }
    }
}
</style>